import React, { useState } from 'react'
import styles from './step1.less'
import step1Img from '../../../assets/enquiry/step1H.png'
import step2CompImg from '../../../assets/enquiry/step2_comp.png'
import { InputItem } from 'antd-mobile'
import { useForm } from 'react-hook-form';
import peopleIcon from '../../../assets/enquiry/people.png'
import companyIcon from '../../../assets/enquiry/company.png'
import phoneIcon from '../../../assets/enquiry/phone.png'
import { useIntl } from 'umi';
function Step1({onNext}) {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const [focusIndex, setFocusIndex] = useState(1)

  function onSubmit(data) {
    // console.log(data, 'dddddddd')

    onNext()
  }
  const intl = useIntl();
  return (
    <div className={styles.box}>
      <div className={styles.header}>
        <img src={step1Img} className={styles.step1}></img>
        <img src={step2CompImg} className={styles.step2Comp}></img>
      </div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <div className={styles.item}>
            <label className={styles.lable}>{intl.formatMessage({id:'THE_CONTACT'})}</label>
            <div className={styles.itemInputBox}>
              <input {...register('name', { required: true })} autoFocus={focusIndex == 1} />
              <img src={peopleIcon} className={styles.icon}></img>
            </div>
            {errors.name && <p>{intl.formatMessage({id:'PLEASE_ENTER'})}</p>}
          </div>
          <div className={styles.item}>
            <label className={styles.lable}>{intl.formatMessage({id:'Phone'})}</label>
            <div className={styles.itemInputBox}>
              <input {...register('phone', { required: true })} type="Number" />
              <img src={phoneIcon} className={styles.icon} autoFocus={focusIndex == 2} type="number"></img>
            </div>
            {errors.phone && <p>{intl.formatMessage({id:'PHONE_NUMBER'})}</p>}
          </div>
          <div className={styles.item}>
            <label className={styles.lable}>{intl.formatMessage({id:'COMPANY_NAME'})}</label>
            <div className={styles.itemInputBox}>
              <input {...register('company', { required: true })} autoFocus={focusIndex == 3} />
              <img src={companyIcon} className={styles.icon}></img>
            </div>
            {errors.company && <p>{intl.formatMessage({id:'PLEASE_ENTER_COMPANY_NAME'})}</p>}
          </div>

        </div>
        <button className={styles.button} type="submit" style={{ height: 44 }}>{intl.formatMessage({id:'NEXT_STEP'})}</button>
      </form>

    </div>
  )
}

export default Step1
